.card-box {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;

    .el-card {
        width: 230px;
        height: 230px;
        background: #fff;
        border-radius: 8px;
        margin: 12px;
        cursor: pointer;

        .header-info {
            display: flex;
            flex-direction: column;
            color: #fff;
            width: 210px;
            height: 135px;
            background-repeat: no-repeat;
            background-size: cover;
            padding: 10px;

            span {
                margin: 5px 0;
            }
        }

        .bottom-info {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            width: 100%;
            height: 75px;

            .bottom-info-content {
                display: flex;
                justify-content: space-between;
                margin: 15px 10px;
                font-weight: 300;
                font-size: 12px;
            }
        }

        .span-box {
            margin: 0 5px;
            padding: 0 2px;
            border-radius: 2px;
            font-size: 12px;
            color: #1296db;
            border: 1px solid #1296db;
        }
    } 
}

.tips {
    display: flex;
    justify-content: center;
    .loadicon {
        margin: 0 auto;
        color: #1296db;
        font-size: 15px;

        span {
            display: flex;
        }
    }

    @keyframes rotateloading {
        0% {
            transform: rotate(0deg);
        }

        25% {
            transform: rotate(90deg);
        }

        50% {
            transform: rotate(180deg);
        }

        75% {
            transform: rotate(270deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .loadAnimate {
        animation: rotateloading 2s linear infinite;
    }
}